<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* div#box1{
            background-color: orange;
        } */
        .red{
            background-color: red !important;
        }
        .d1{
            background-color: slateblue ;
        }
        /* div,p,span{
            background-color: yellow;
        } */
        /* 
            样式的冲突
                -当我们通过不同的选择器，选中相同的元素，
                并且为相同的样式设置不同的值，此时发生了样式的冲突

            发生样式冲突时，由选择器的权重决定

            选择器的权重
                    内联样式        1  0 0 0    
                    id选择器           1 0 0    #id
                    类和伪类选择器       1 0    .class{}  a>b:first-child{}
                    元素选择器             1    p{}
            
            比较优先级时，需要将所有的选择器的优先级进行相加计算（分组选择器是单独计算的）
                选择器的累加不会超过最大的数量级
                如果优先级计算后相同，此时则优先使用靠下的样式
             
            可以在某一个样式后边添加 !important,则此时样式会得到最高的优先级，超过内联样式
        */
        div{
            font-size: 50px;
        }
        div.red{
            font-size: 20px;
        }

    </style>
</head>
<body>
        <div id="box1" class="red d1 d2 d3"> div<span>div中的span</span></div>
    
</body>
</html>